<!doctype html>
<html lang="$i18n{language}">
<head>
  <meta charset="utf-8">
  <title>$i18n{titleText}</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="power.css">
  <script type="module" src="power.js"></script>
</head>
<body>
  <table id="main-table">
    <tr class="section-row">
      <td class="title-cell">
        <p class="title-text">$i18n{batteryChargeSectionTitle}</p>
      </td>
      <td class="show-button-cell">
        <button id="battery-charge-show-button" class="show-button">
          $i18n{showButton}
        </button>
      </td>
      <td id="battery-charge-cell" class="plots-cell">
        <div id="battery-charge-section" class="section-div">
          <div class="plots-div" id="battery-charge-plots-div"></div>
          <form>
            <label>
              <span>$i18n{averageOverText}</span>
              <input id="sample-count-input" type="number" min="1" max="150"
                     value="10">
            </label>
            <span>$i18n{samplesText}</span>
          </form>
          <button id="battery-charge-reload-button" class="reload-button">
            $i18n{reloadButton}
          </button>
        </div>
      </td>
    </tr>

    <tr class="section-row">
      <td class="title-cell">
        <p class="title-text">$i18n{cpuIdleSectionTitle}</p>
      </td>
      <td class="show-button-cell">
        <button id="cpu-idle-show-button" class="show-button">
          $i18n{showButton}
        </button>
      </td>
      <td id="cpu-idle-cell" class="plots-cell">
        <div id="cpu-idle-section" class="section-div">
          <div class="plots-div" id="cpu-idle-plots-div"></div>
          <button id="cpu-idle-reload-button" class="reload-button">
            $i18n{reloadButton}
          </button>
        </div>
      </td>
    </tr>

    <tr class="section-row">
      <td class="title-cell">
        <p class="title-text">$i18n{cpuFreqSectionTitle}</p>
      </td>
      <td class="show-button-cell">
        <button id="cpu-freq-show-button" class="show-button">
          $i18n{showButton}
        </button>
      </td>
      <td id="cpu-freq-cell" class="plots-cell">
        <div id="cpu-freq-section" class="section-div">
          <div class="plots-div" id="cpu-freq-plots-div"></div>
          <button id="cpu-freq-reload-button" class="reload-button">
            $i18n{reloadButton}
          </button>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>
